﻿*{-webkit-tap-highlight-color:transparent;padding:0;margin:0;}
.body{
	background-color:silver;
	100%;	
}
/******STATE BAR*******/
.div-statebar{
	position:relative;
	text-align:center;	
}
.img-back-style{
	display:inline;
	position:absolute;
	top:0px; 
	left:0px; 
}
.span-title-style{
	color:#4e4e4e;
}

.input-button-style{
	display:inline;
	position:absolute;
	top:0px; 
	right:0px;
	color:#61A3F4;
	background-color:white;
    border:solid 1px #61A3F4;
    border-radius:2px;	
}
.chart-bg{
	background-image:url(../images/moniter/bg_pic@3x.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;/*opacity:0.70;*/
}
.tips{
	font-family:"微软雅黑";
	color:#619CD2;
}
.unit{
	position:absolute;	
}
.timetip{
	position:absolute;
}

/*****DAU TABLE****/

table {
   width:92%;
   margin:1.5%  4%  0  4%;
   border-collapse: collapse;
}	
tr{
	text-align:center;	
}
thead{
	background-color:#f0f0f0;
	color:#696969;
	border-radius:2px;
}
td{
	width:46%;
}

tbody tr{
	border-bottom:solid 1px silver;
	color:#AEAEAE;
}
.select-style{
	color:#63A9EA;
	border-bottom:solid 3px #63A9EA;
}
.unselect-style{
	color:#AEAEAE;
	border-bottom:none;
}	

/******CHART *******/
	.chart-title{
	   margin:0 4% 0  4%;
	   text-align:center;
		}
		/*color:#AEAEAE;*/
	.chart-title div{	
		display:inline-block;
		text-align:center;		
		width:46%;
	}
	.chart{
		margin-left:4%;
		margin-right:4%;
		text-align:center;
	}
@media screen and (min-width: 321px) and (max-width: 360px){	

	/******STATE BAR*******/
	.div-statebar{
        height:42px;
		margin:0px 14px 0px 14px;
	}
	.img-back-style{
	   top:11px; 
	   width:12px;
	   height:21px;
	}
	.span-title-style{
		font-size:17px;
        line-height:42px;		
	}

	.input-button-style{
	   width:72px;
	   height:24px;
	   top:8px; 
	 
	}
	.tips{
	  font-size:11.3px;
      height:26px;	  
	}
	.pic{
		height:16.2px;
		width:16.2px;
		margin-left:17.1px;
		margin-right:3.8px;
		margin-top:8.5px;
	}
	.timetip{
		margin-top:8.5px;
	}
	.unit{
		right:26px;
		margin-top:8.5px;
	}
	/*****DAU TABLE****/
   td{
	   font-size:13px;
   }
	thead tr{
		height:29px;
	}	
	tbody tr{
		height: 43px;
	}
	/******CHART *******/
   .chart-title{	  
	  font-size:15px;
   }
   .chart-title div{	
	  line-height:38px;
	}
	/*
	#left-title{
		color:#63A9EA;
		border-bottom:solid 3px #63A9EA;
	}
    */
	#canvas{
		/*background:red;*/
	}
}


@media screen and (min-width: 376px){	
	/******STATE BAR*******/
   .div-statebar{
        height:49px;
		margin:0px 17px 0px 17px;
	}
	.img-back-style{
	   top:11px; 
	   width:13px;
	   height:24px;
	}
	.span-title-style{
		font-size:20px;
        line-height:49px;	
	}

	.input-button-style{
	  width:83px;
	   height:28px;
	   top:9px; 
	}
	.tips{
	  font-size:13.2px;
      height:30px;	  
	}
	.pic{
		height:19px;
		width:19px;
		margin-left:20px;
		margin-right:4.4px;
		margin-top:10px;
	}
	.timetip{
		margin-top:10px;
	}
	.unit{
		right:30px;
		margin-top:10px;
	}
	/*****DAU TABLE****/	
    td{
	   font-size:15px;
    }
	thead tr{
		height:34px;
	}	
	tbody tr{
		height: 50px;
	}
	 .chart-title div{	
	  line-height:44px;
	}
	/*
	#left-title{
		color:#63A9EA;
		border-bottom:solid 4px #63A9EA;
	}
	*/
}
@media screen and (min-width: 361px) and (max-width: 375px){	

	/******STATE BAR*******/
	.div-statebar{
        height:42px;
		margin:0px 14px 0px 14px;
	}
	.img-back-style{
	   top:15px; 
	   width:12px;
	   height:22px;
	}
	.span-title-style{
		font-size:18px;
        line-height:44px;		
	}

	.input-button-style{
	   width:72px;
	   height:24px;
	   top:8px; 
	 
	}
	.tips{
	  font-size:12px;
      height:26px;	  
	}
	.pic{
		height:16.2px;
		width:16.2px;
		margin-left:17.1px;
		margin-right:3.8px;
		margin-top:8.5px;
	}
	.timetip{
		margin-top:8.5px;
	}
	.unit{
		right:26px;
		margin-top:8.5px;
	}
	/*****DAU TABLE****/
   td{
	   font-size:13px;
   }
	thead tr{
		height:29px;
	}	
	tbody tr{
		height: 43px;
	}
	/******CHART *******/
   .chart-title{	  
	  font-size:15px;
   }
   .chart-title div{	
	  line-height:38px;
	}
	/*
	#left-title{
		color:#63A9EA;
		border-bottom:solid 3px #63A9EA;
	}
    */
	#canvas{
		/*background:red;*/
	}
}
@media screen and (max-width: 320px){	

	/******STATE BAR*******/
	.div-statebar{
        height:42px;
		margin:0px 14px 0px 14px;
	}
	.img-back-style{
	   top:11px; 
	   width:10.32px;
	   height:19px;
	}
	.span-title-style{
		font-size:15.5px;
        line-height:40px;		
	}

	.input-button-style{
	   width:72px;
	   height:24px;
	   top:8px; 
	 
	}
	.tips{
	  font-size:10px;
      height:26px;	  
	}
	.pic{
		height:16.2px;
		width:16.2px;
		margin-left:17.1px;
		margin-right:3.8px;
		margin-top:8.5px;
	}
	.timetip{
		margin-top:8.5px;
	}
	.unit{
		right:26px;
		margin-top:8.5px;
	}
	/*****DAU TABLE****/
   td{
	   font-size:10px;
   }
	thead tr{
		height:22px;
	}	
	tbody tr{
		height: 35px;
	}
	/******CHART *******/
   .chart-title{	  
	  font-size:13px;
   }
   .chart-title div{	
	  line-height:33px;
	}
	/*
	#left-title{
		color:#63A9EA;
		border-bottom:solid 3px #63A9EA;
	}
    */
	#canvas{
		/*background:red;*/
	}
}

